<template>
  <div class="history_workorder">
    <div class="history_workorder_header">
      <el-form :inline="true" :model="workOrderSearch" class="demo-form-inline">
        <el-form-item>
          <el-date-picker
            v-model="workOrderSearch.dateTime"
            type="date"
            placeholder="日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="workOrderSearch.type"
            placeholder="类型"
            width="50"
          >
            <el-option label="工单号" value="id"></el-option>
            <el-option label="联系电话" value="telephone"></el-option>
            <el-option label="收件人" value="name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="workOrderSearch.key"
            placeholder="关键词"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchWorkOrderNumberHandle"
            >查询</el-button
          >
          <el-button @click="refreshData()">
            <div class="el-icon-refresh"></div>
            刷新数据
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="history_workorder_content">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        style="width: 100%"
        max-height="550"
        min-height="550"
        v-loading="loading"
      >
        <el-table-column prop="id" fixed="left" sortable label="ID" width="120">
        </el-table-column>
        <el-table-column
          prop="createTime"
          sortable
          label="创建时间"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="expectTime"
          sortable
          label="预期时间"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="completeTime"
          sortable
          label="完成时间"
          width="120"
        >
        </el-table-column>
        <el-table-column label="工单">
          <el-table-column prop="orderID" label="工单ID" width="120">
          </el-table-column>
          <el-table-column prop="orderType" label="工单类型"> </el-table-column>
          <el-table-column
            prop="orderStatus"
            sortable
            width="100"
            label="工单状态"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="收件人">
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column label="收件地址">
            <el-table-column prop="province" label="省份"> </el-table-column>
            <el-table-column prop="city" label="市区"> </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="telephone" label="联系电话" width="100">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="demandContent" label="需求" width="200">
        </el-table-column>
        <el-table-column prop="count" label="数量"> </el-table-column>
        <el-table-column prop="annex" label="附件">
          <template slot-scope="scope">
            <el-button
              @click="viewAnnexRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <div class="under_review" v-if="scope.row.examine === 'INIT'">
              审核中
            </div>
            <div class="faild" v-else-if="scope.row.examine === 'FAILD'">
              审核失败
            </div>
            <div class="success" v-else>审核通过</div>
            <el-button
              @click="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
            <el-button
              @click="viewRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              查看工单详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        :pager-count="11"
        layout="prev, pager, next"
        :total="pagesTotal"
        :current-page="currentPage"
        @current-change="currentPageChangeHandle"
      >
      </el-pagination>
      <el-dialog title="工单详情" :visible.sync="dialogFormVisible">
        <div class="dialog_content">
          <div class="item">
            <div class="label">ID</div>
            <div class="content">{{ dialogFormData.id }}</div>
          </div>
          <div class="item">
            <div class="label">创建时间</div>
            <div class="content">{{ dialogFormData.createTime }}</div>
          </div>
          <div class="item">
            <div class="label">预期时间</div>
            <div class="content">{{ dialogFormData.expectTime }}</div>
          </div>
          <div class="item">
            <div class="label">完成时间</div>
            <div class="content">{{ dialogFormData.completeTime }}</div>
          </div>
          <div class="item">
            <div class="label">工单ID</div>
            <div class="content">{{ dialogFormData.orderID }}</div>
          </div>
          <div class="item">
            <div class="label">工单类型</div>
            <div class="content">{{ dialogFormData.orderType }}</div>
          </div>
          <div class="item">
            <div class="label">工单状态</div>
            <div class="content">{{ dialogFormData.orderStatus }}</div>
          </div>
          <div class="item">
            <div class="label">审核状态</div>
            <div class="content">{{ dialogFormData.examine }}</div>
          </div>
          <div class="item">
            <div class="label">收件人姓名</div>
            <div class="content">{{ dialogFormData.name }}</div>
          </div>
          <div class="item">
            <div class="label">收件地址</div>
            <div class="content">
              {{ dialogFormData.province }},{{ dialogFormData.city }},{{
                dialogFormData.address
              }}
            </div>
          </div>
          <div class="item">
            <div class="label">联系电话</div>
            <div class="content">{{ dialogFormData.telephone }}</div>
          </div>
          <div class="item">
            <div class="label">需求</div>
            <div class="content">{{ dialogFormData.demandContent }}</div>
          </div>
          <div class="item">
            <div class="label">数量</div>
            <div class="content">{{ dialogFormData.count }}</div>
          </div>
          <div class="item">
            <div class="label">附件</div>
            <div
              class="content link"
              @click="viewAnnexRow(dialogFormData.index, dialogFormData.data)"
            >
              查看
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: new Date(),
      isCollect: false,
      tableData: [],
      loading: false,
      pagesTotal: 10000,
      currentPage: 1,
      selectRows: [],
      dialogFormVisible: false,
      dialogFormData: {},
      workOrderSearch: {
        dateTime: new Date(),
        key: "",
        type: "",
      },
    };
  },
  created() {
    this.currentPage = 1;
    this.getPageData(this.currentPage, { day: this.value.getTime() });
  },
  watch: {
    value(v) {
      this.isCollect = true;
      this.currentPage = 1;
      this.getPageData(this.currentPage, { day: v.getTime() });
    },
  },
  methods: {
    viewAnnexRow(index, rows) {
      let row = rows[index];
      console.log(row);
    },
    viewRow(index, rows) {
      let row = rows[index];
      console.log(row);
      this.dialogFormVisible = true;
      this.dialogFormData = { ...row, index: index, data: rows };
    },
    deleteRow(index, rows) {
      this.selectRows = [rows[index]];
      let that = this;
      this.$confirm("此操作将永久移除该工单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        that.loading = true;
        let ids = that.filterItems("id", that.selectRows);
        that.$order
          .deleteSelectedOrders({ rows: ids })
          /* that.$store
          .dispatch("deleteSelectedRows", { rows: ids }) */
          .then(() => {
            //that.tableData = v.data;
            that.$message("移除成功");
          })
          .catch((v) => {
            console.log(v);
            that.$message(v.message || "Error");
          })
          .finally(() => {
            that.timeout = clearTimeout(that.timeout);
            that.timeout = setTimeout(
              () => ((that.loading = false), (this.currentPage = 1)),
              500
            );
          });
      });
    },
    refreshData() {
      if (this.workOrderSearch.key === "") {
        this.$message("关键词不能为空");
        return;
      }
      if (this.workOrderSearch.type === "") {
        this.$message("类型不能为空");
        return;
      }
      this.currentPage = 1;
      this.getPageData(this.currentPage, {
        ...this.workOrderSearch,
        day: this.value.getTime(),
      });
    },
    searchWorkOrderNumberHandle() {
      if (this.workOrderSearch.key === "") {
        this.$message("关键词不能为空");
        return;
      }
      if (this.workOrderSearch.type === "") {
        this.$message("类型不能为空");
        return;
      }
      this.currentPage = 1;
      this.getPageData(this.currentPage, {
        ...this.workOrderSearch,
        day: this.value.getTime(),
      });
    },
    currentPageChangeHandle(v) {
      console.log(v);
      this.currentPage = v;
      this.getPageData(this.currentPage, { day: this.value.getTime() });
    },
    collectChangeHandle() {
      this.isCollect = this.isCollect ? false : true;
    },
    getPageData(v, filter) {
      let that = this;
      this.loading = true;
      this.$order
        .getWorkOrderList({ pn: v || 1, filter: filter })
        /* this.$store
        .dispatch("getWorkOrderList", { pn: v || 1, filter: filter }) */
        .then((v) => {
          that.tableData = v.data;
        })
        .catch((v) => {
          console.log(v);
          that.$message(v.message || "Error");
        })
        .finally(() => {
          that.timeout = clearTimeout(that.timeout);
          that.timeout = setTimeout(() => (that.loading = false), 500);
        });
    },
  },
};
</script>
<style lang="less">
.history_workorder {
  .history_workorder_header {
    .box-card {
      &.on {
        height: 52px;
      }
    }
  }
  .history_workorder_content {
    .el-pagination {
      text-align: center;
      padding: 10px 0;
      font-weight: 400;
    }
    .el-table td,
    .el-table th {
      padding: 5px 0;
    }
    .el-table .cell {
      font-size: 12px;
      .faild {
        color: red;
      }
      .under_review {
        color: #ccc;
      }
    }
  }
  .dialog_content {
    height: 400px;
    overflow: auto;
    overflow-x: hidden;
    border: 1px #efefef solid;
  }
  .item {
    display: flex;
    padding: 10px 0;
    text-align: right;
    border-bottom: 1px #efefef solid;
    &:last-child {
      border: 0;
    }
    .label {
      width: 80px;
      margin: 0 20px 0 0;
      color: #ccc;
    }
    .content {
      flex: 1;
      text-align: left;
      &.link {
        color: blue;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
}
</style>
